import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {
  Tabs,
  Form,
  Radio,
  InputNumber,
  Tooltip,
  Icon,
  Row,
  Col,
  Button
} from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
import noop from 'util/noop';

@Relax
export default class OrderBasic extends Component{
  static defaultProps = {
    autoCancelTime: 1,
    autoConfirmTime: 1,
    ordersPerTenMinutes: 1,
    openTimeHour: 1,
    openTimeMinute: 0,
    closeTimeHour: 1,
    closeTimeMinute: 0,
    openReturnCoupon: 0,
    onSetting: noop,
    onSave: noop,
    layoutProps: {
      labelCol: { 
        span: 6 
      },
      wrapperCol: {
        span: 18
      }
    }
  }
  render() {
    let {layoutProps, autoCancelTime, autoConfirmTime, ordersPerTenMinutes, openTimeHour, 
      openTimeMinute, closeTimeHour, closeTimeMinute, openReturnCoupon, onSetting, onSave} = this.props;
    return (
      <Form>
        <FormItem
          label="订单失效时间"
          {...layoutProps}
          required>
          <span>下单后</span>
          <InputNumber 
            min={0} 
            className="orderInput" 
            value={autoCancelTime} 
            onChange={(v)=> onSetting({
              autoCancelTime: v
            })}/> 小时内不付款将废弃订单，如果失效时间填写为空，默认为72小时
        </FormItem>
        <FormItem
          label="订单确认收货时间"
          {...layoutProps}
          required>
          <span>订单发货后</span>
          <InputNumber 
            min={3} 
            max={20}
            className="orderInput" 
            onChange={(v)=> onSetting({
              autoConfirmTime: v
            })}
            value={autoConfirmTime}/> 天内不确认收货了，订单状态自动变更为已完成，如果收货时间填写为空，默认为10天
        </FormItem>
        <FormItem
          label="下单限制"
          {...layoutProps}
          required>
          <span>10分钟内最多允许下</span> 
          <InputNumber 
            min={1} 
            max={20} 
            className="orderInput" 
            onChange={(v)=> onSetting({
              ordersPerTenMinutes: v
            })}
            value={ordersPerTenMinutes}/> 笔订单，默认为10笔，限制输入1-20之间的整数
        </FormItem>
        <FormItem
          label="下单时间"
          {...layoutProps}
          required>
          <InputNumber 
            min={0} 
            max={12} 
            className="orderInput" 
            onChange={(v)=> onSetting({
              openTimeHour: v
            })}
            value={openTimeHour}/>:
          <InputNumber 
            min={0} 
            max={59} 
            className="orderInput" 
            onChange={(v)=> onSetting({
              openTimeMinute: v
            })}
            value={openTimeMinute}/>-
          <InputNumber 
            min={0} 
            max={12} 
            className="orderInput" 
            onChange={(v)=> onSetting({
              closeTimeHour: v
            })}
            value={closeTimeHour}/>:
          <InputNumber 
            min={0} 
            max={59} 
            className="orderInput" 
            onChange={(v)=> onSetting({
              closeTimeMinute: v
            })}
            value={closeTimeMinute}/> 
          <span>之间的时间段允许用户下单</span>
        </FormItem>
        <FormItem 
          label="优惠券信息"
          {...layoutProps}
          required>
          <RadioGroup 
          value={openReturnCoupon}  
          onChange={(v)=> onSetting({
            openReturnCoupon: openReturnCoupon ? 0 : 1
          })}>
            <Radio value={1}>开启</Radio>
            <Radio value={0}>关闭</Radio>
          </RadioGroup>
          <Tooltip placement="bottomRight" title={"开启后，用户退货后退还已使用的优惠券。关闭后，用户下单使用的优惠券不予退还。"}>
            <span className="help-tips">
              <Icon type="info-circle"/>
            </span>
          </Tooltip>
        </FormItem>
        <Row>
          <Col span="6"></Col>
          <Col span="18">
            <Button type="primary" onClick={onSave}>保存</Button>
          </Col>
        </Row>
      </Form>
    )
  }
}